<template>
  <!-- 添加存档 -->
  <h-modal class="event-modal" v-model="show" title="添加存档" @submit="add">
    <h-query :showKey="['title']" @search="search">
      <!-- <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click="add">批量添加</a-button> -->
    </h-query>

    <br>
    <!-- <br> -->
    <a-form-model :model="form" size="large">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="" v-if="reload">
            <h-table
              ref="htable"
              @init="getList"
              :config="config"
              :showHeadBgNone="false"
              :zebraStripes="false"
              showRowSelection
              @select="select">
              <span slot="content" slot-scope="{text}">
                {{ text }}
              </span>
              <span slot="titles" slot-scope="{text}">
                {{ text | htmlFilter }}
              </span>
              <span slot="eventGrade" slot-scope="{text}">
                {{ event[text] }}
              </span>
            </h-table>
          </a-form-model-item>

        </a-col>
      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { eventShareList, addarchiveEvent } from '@/api/serve';
import { replaceHTML } from '@/api/common';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal(val) {
        this.show = val;
      },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      // <a-radio-button :value="0">普通预警</a-radio-button>
      //         <a-radio-button class="radio-button-yellow" :value="1">中级预警 </a-radio-button>
      //         <a-radio-button class="radio-button-orange" :value="2">高级预警</a-radio-button>
      //         <a-radio-button class="radio-button-red" :value="3">特级预警</a-radio-button>
      event: {
        0: '普通预警',
        1: '中级预警',
        2: '高级预警',
        3: '特级预警'
      },
      show: false,
      reload: false,
      form: {},
      config: {
        rowKey: 'id',
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '事件标题',
            dataIndex: 'title',
            scopedSlots: { customRender: 'titles' }
          },
          {
            align: 'center',
            title: '预警等级',
            dataIndex: 'eventGrade',
            scopedSlots: { customRender: 'eventGrade' }
          },
          {
            align: 'center',
            title: '事件总结',
            dataIndex: 'summary',
            ellipsis: true
            // scopedSlots: { customRender: 'summary' }
          },
          {
            align: 'center',
            title: '事件开始时间',
            dataIndex: 'procTime'
          }
        ],
        pagination: {
          total: 100
        }
      },
      eventIdList: [],
      queryParams: {
        pageNo: 1,
        pageSize: 6
      }
    };
  },
  created() {
    this.show = this.showModal;
    this.getList();
  },
  methods: {
    replaceHTML(html) {
      return html ? replaceHTML(html) : '';
    },
    search(params) {
      Object.assign(this.queryParams, params);
      this.getList();
    },
    getList(params) {
      if (params) {
        Object.assign(this.queryParams, params);
      }
      eventShareList(this.queryParams).then(res => {
        this.config.dataSource = res.data.records.map(e => {
          return {
            ...e,
            tip: e.eventLevel == 0 ? '普通事件' : '重点事件'
          };
        });
        this.config.pagination.total = res.data.total;
        this.reload = true;
      });
    },
    select({ selectedRowKeys }) {
      console.log(selectedRowKeys);
      this.eventIdList = selectedRowKeys;
    },
    add() {
      if (!this.eventIdList.length) {
        this.$message.error('请选择事件');
        return;
      }
      addarchiveEvent({
        eventIdList: this.eventIdList
      }).then(res => {
        this.$message.success('创建成功');
        this.reload = false;
        this.$emit('submit');

        this.$nextTick(() => {
          this.reload = true;
          this.getList();
          this.show = false;
        });
      });
    }
  }
};
</script>

<style>

</style>
